<html>
<head>
<title>target example</title>

<script type="text/javascript">

function highlightTarget(evt) {
  evt.target.style.backgroundColor = 'blue';
}

function resetTarget(evt) {
  evt.target.style.backgroundColor = 'silver';
}

</script>
</head>

<body onmousedown="highlightTarget(event)" onmouseup="resetTarget(event)">

<p>This example demonstrates how, by using event propagation, two event
handler functions in the body element can use the <i>target</i> property
to distinguish between, and process, all other bubbleable events occuring
lower down the DOM. Note: not all events can bubble up the DOM.</p>

<p>As an event lower down the DOM bubbles up and reaches the body
object, the <i>target</i> property contains the object reference of the
original event target. In this case which element in the document
received an onmousedown or onmouseup event.</p>

<p>This allows the event handlers of the body object to process bubbleable
events occuring lower down the DOM structure, which means there is no need
to attach the event handlers to every button & para element of the page.</p>

<button>button 1</button><br />
<button>button 2</button><br />
<button>button 3</button><br />
<button>button 4</button><br />
<button>button 5</button><br />
<button>button 6</button><br />
<button>button 7</button><br />

</body>
</html>
